<template>
	<view class="page-container pb-0 bg-grey">
		<up-navbar safeAreaInsetTop fixed placeholder :autoBack="true"></up-navbar>
		<view class="plr-24 pt-24 bg-white h-150">
			<view class="space-between flex-a">
				<view class="flex-1 text-ellipsis mr-40 fs-40 font-bold">恩施大峡谷超值特价，速来抢购</view>
				<zjy-button size="small" type="line">管理</zjy-button>
			</view>
			<view class="mt-4 c-grey-86">6个产品 · 12-23 12:21</view>
		</view>
		<zjy-tabs :tabs="tabs" :flex="true" :activeId="activeId" @tabClick="handleTabClick" bgColor="#ffffff" />
		<scroll-view
			:scroll-y="true"
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
			@refresherabort="onAbort"
			class="plr-24 pt-24"
			:style="{
				height: scrollViewHeight,
			}"
		>
			<template v-if="listData && listData.length > 0">
				<view v-for="(item, index) in listData" :key="index" class="pb-16">
					<product-item :data="item" />
				</view>
			</template>
			<zjy-empty emptyText="暂无数据" v-else-if="!freshing && searched"></zjy-empty>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
import useCommonStore from "@/store/common"
import productItem from "./components/product-item.vue"
import type { ZjyTabItem } from "@/types/common"
import { freshLoading } from "@/utils/fresh-loading"

const commonStore = useCommonStore()
const tabs = ref<ZjyTabItem[]>([
	{
		id: "0",
		name: "全部",
	},
	{
		id: "1",
		name: "景点门票",
	},
	{
		id: "2",
		name: "旅游线路",
	},
	{
		id: "3",
		name: "度假酒店",
	},
])
const activeId = ref("1")
const handleTabClick = (id: string) => {
	activeId.value = id
}

//#region 初始化下拉刷新
const scrollViewHeight = `calc(100vh - ${commonStore.statusBarHeight + commonStore.navbarHeight}px - 238rpx)`
const searched = ref(false)
const freshLoadingRef = freshLoading()
let {
	loadMore,
	triggered,
	onPulling,
	onRefresh,
	onRestore,
	onAbort,
	getListData,
	listData,
	freshing,
	getListSuccessCallback,
} = freshLoadingRef
freshLoadingRef.listService.value = null
getListSuccessCallback.value = () => {
	searched.value = true
}
listData.value.push(...[1, 2])
//#endregion
</script>
<style lang="scss" scoped></style>
